<template>
    <div class="out_box">
        <div class="relative content_box">
            <div class="case_box mb_20" style="padding: 0;">
                <div class="title cl">
                    <h2 class="f_l">
                        兑换列表 (HAHA)
                    </h2>
                </div>
                <div class="content gray_table text_c">
                    <v-data-table :data='getData' :currentData='dataList.records' :columns='columnsData' stripe :emptyText="not_data">
                        <template slot="td" slot-scope="props">
                            <div class="dis_ib text_l" v-if="props.column.field === 'createTime'">
                                <span class="text">{{ $getFormatMD(props.content, true).split(' ')[0] }}<br />{{ $getFormatMD(props.content, true).split(' ')[1] }}</span>
                            </div>
                            <div v-else-if="props.column.field === 'cnumber'">
                                <span class="text">{{ props.content + ' Haha' }}</span>
                            </div>
                            <div v-else-if="props.column.field === 'proportion2'">
                                <span class="text">{{ props.item.proportion * 100 + ' U≈1000 H' }}</span>
                            </div>
                            <div v-else-if="props.column.field === 'payMoney'">
                                <span class="text">{{ '$ ' + props.content }}</span>
                            </div>
                            <div v-else-if="props.column.field === 'state'">
                                <span class="text" v-show="props.content === 0">待支付</span>
                                <span class="text" v-show="props.content === 1">支付成功</span>
                                <span class="text" v-show="props.content === 2">已到期</span>
                            </div>
                            <div v-else-if="props.column.field === 'status'">
                                <a href="javascript:void(0)" class="text font_orange" v-show="props.content === 0">去支付</a>
                                <span class="text font_green" v-show="props.content === 1">审核中</span>
                                <span class="text" v-show="props.content === 2">成功</span>
                                <span class="text font_yellow" v-show="props.content === 3">已驳回</span>
                            </div>
                            <div v-else-if="props.column.field === 'operate'">
                                <a href="javascript:void(0)" class="text font_black" v-show="props.item.status === 0">取消订单</a>
                                <a href="javascript:void(0)" class="text" v-show="props.item.status > 0">查看订单</a>
                            </div>
                            <span v-else>{{ props.content }}</span>
                        </template>
                    </v-data-table>
                    <div class="pagination_box pr_20">
                        <v-pagination @change="changePage" :total="dataList.total" :show-total="showTotal" show-quick-jumper></v-pagination>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { getOrderCoinHaha } from '@doapis/personal/orders.js';

    export default {
        name: "CoinHahaOrder",
        data: function() {
            return {
                dataList: {
                    current: 1,
                    records: [],
                    total: 0
                },
                columnsData:[
                    { title:"订单号", field:'orderId', width: '11.11%' },
                    { title:"兑换时间", field:'createTime', width: '11.11%' },
                    { title:"兑换额度", field:'cnumber', width: '11.11%' },
                    { title:"单价($)", field:'proportion', width: '11.11%' },
                    { title:"兑换比例", field:'proportion2', width: '11.11%' },
                    { title:"订单总金额", field:'payMoney', width: '11.11%' },
                    { title:"支付状态", field:'state', width: '11.11%' },
                    { title:"订单状态", field:'status', width: '11.11%' },
                    { title:"操作", field:'operate', width: '11.11%' }
                ],
            }
        },
        computed: {
            userDATA: function() {
                const userDATA = this.$store.state.userDATA;
                return userDATA;
            }
        },
        methods: {
            getData: function(params) {
                const that = this;
                return params ? $.$getPromiseNullData() : getOrderCoinHaha({
                    current: that.dataList.current,
                    memberid: that.userDATA.memberid
                }).then(function(res) {
                    that.dataList = res.data;
                });
            },
            showTotal: function(val) {
                return '全部' + this.dataList.total + '条';
            },
            changePage: function(val) {
                this.dataList.current = val;
                this.getOrderList();
            },
            $getFormatMD: $.$getFormatMD
        },
        mounted: function() {
            this.getData();
        }
    };
</script>

<style lang="less" scoped>
    @import '~@css/root.less';

    .out_box{
        background-color: #eaeaea;
    }
    .content_box{
        .case_box{
            background-color: white;
            >.title{
                padding: 16px 20px;
                font-size: 13px;
                color: white;
                background: linear-gradient(225deg, #56ccf2 0%, #2948ff 100%)
            }
            >.content{
                padding: 20px;
                font-size: 13px;
                .font_gray;
            }
        }
    }
</style>
